{extend name="common/index1" /} {block name="style"}
<link rel="stylesheet" href="__TEMPLATE__/mobile/index/css/index.css" type="text/css">
<link rel="stylesheet" href="__TEMPLATE__/mobile/index/css/member.css" type="text/css">
<script type="text/javascript" src="__TEMPLATE__/sysme/js/aa.js"></script>
<link rel="stylesheet" type="text/css" href="__SYSMET__/lib/Hui-iconfont/1.0.8/iconfont.css" />

<script src="__TEMPLATE__/sysme/tili/js/jquery.1.7.2.min.js"></script>
<script src="__TEMPLATE__/sysme/tili/js/mobiscroll_002.js" type="text/javascript"></script>
<script src="__TEMPLATE__/sysme/tili/js/mobiscroll_004.js" type="text/javascript"></script>
<link href="__TEMPLATE__/sysme/tili/css/mobiscroll_002.css" rel="stylesheet" type="text/css">
<link href="__TEMPLATE__/sysme/tili/css/mobiscroll.css" rel="stylesheet" type="text/css">
<script src="__TEMPLATE__/sysme/tili/js/mobiscroll.js" type="text/javascript"></script>
<script src="__TEMPLATE__/sysme/tili/js/mobiscroll_003.js" type="text/javascript"></script>
<script src="__TEMPLATE__/sysme/tili/js/mobiscroll_005.js" type="text/javascript"></script>
<link href="__TEMPLATE__/sysme/tili/css/mobiscroll_003.css" rel="stylesheet" type="text/css"> {/block} {block name="body"}

<style type="text/css">
	
	.czjekj {
		display: inline-block;
		width: 20%;
		height: 20px;
		text-align: center;
		font-size: 12px;
		border: 1px solid #ccc;
		color: #000;
		border-radius: 6px;
		line-height: 20px;
		background: #cccccc91;
		margin-bottom:10px;
	}
	
	form {
		width: 100%;
		margin-top: 75px;
		display:block;
	}
	
	.xzfs {
		width: 100%;
	}
	
	.xzfs>div {
		overflow: hidden;
		margin:0 5% 5px;
	}
	
	.xzfs div>span {
		width:25%;
		display: block;
		font-size: 14px;
		font-weight: bold;
		float: left;
		height: 30px;
		line-height: 30px;
	}
	
	.xzfs div input {
		
		display: block;
		float: left;
		width: 75%;
		text-indent: 5px;
		height:30px;
		line-height:30px;
		color:#675656;
	}
	
	
	#tijiao {
		width: 90%;
		height: 30px;
		display:block;
		line-height: 30px;
		background: #d91d36;
		border-radius: 4px;
		color: #fff;
		margin:20px auto;
		font-size: 12px;
	}
</style>

<form method="post" enctype="" style="width:100%;">
	<div class="xzfs">
		<div>
			<span>账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号&nbsp;:&nbsp;</span>
			<input type="text" style="border:1px solid #ccc;text-indent: 4%;" id="username" name="username" value="{$username}" readonly="readonly" />
		</div>
		<div  style="margin-top:15px;">
			<span >充值金额：</span>
			<input type="hidden" style="border:1px solid #ccc;text-indent: 4%;" name="amount" id="amount"  onchange="if(this.value<=0) this.value=0;" required="required" value="" >
			<p style="float:left;overflow: hidden;width:75%;" class="czje_q">
				<span class="czjekj">1元</span>
				<span class="czjekj">50元</span>
				<span class="czjekj" id="czje_y">100元</span>
				<span class="czjekj" id="czje_e">200元</span>
				<span class="czjekj" id="czje_ws" style="">500元</span>
				<span class="czjekj" id="czje_bab" style="">800元</span>
				<span class="czjekj" id="czje_yiq" style="">1000元</span>
				<span class="czjekj" id="czje_yiqw" style="">1500元</span>
			</p>
		</div>
	</div>
	<input class="tijiao" id="tijiao" style="margin:20px auto;"  type="button" value="提交" />
</form>
<div style="width:100%;height:100%;border:1px solid #ccc;position:fixed;background:#fff;display:none;padding-top:10px;top:44px;font-size:14px;" id="wx_pay">
	<div style="text-align:center;">
		<span style="color:#FF0000;display:block;margin:0 auto;width:100%;text-align: center;" > 充值账号：&nbsp;&nbsp;<i id="wx_pay_name" style="font-style: normal;"></i></span>
		<span style="color:#FF0000;display:block;margin:0 auto;width:100%;text-align: center;" > 充值金额：&nbsp;&nbsp;<i id="wx_pay_money"  style="font-style: normal;"></i></span>
		<img id="wx_pay_img" src="" style="margin-top:10px;margin-bottom:10px;"  width="190" ><br />
		<span style="color:#FF0000;display:block;margin:0 auto;width:100%;text-align: center;" >[打开微信，扫码支付]</span>
		<div style="width:100%;color:#FF0000;display:text-align: center;" id="wx_djs">05分00秒失效</div>
		<div style="width:50%;padding:10px 15px;border:1px solid #ccc;text-align: center;height:40px;margin:10px auto 0;" id="wx_pay_success">我已支付</div>
	</div>
</div>
<div id="tishi" style="width:210px;height:40px;opacity: .6;background:#000;position:fixed;left:50%;margin-left:-100px;top:100px;display:none;top:30%;"></div>
<div id="tishi_nr" style="width:210px;height:auto;color:#fff;font-size:14px;text-align:center;position:fixed;left:50%;top:30%;margin-left:-100px;z-index: 1;display:none;padding:10px;"></div>
<script>
	var minute = "4";
	var second = "60";
	var aid='';
	var aclass='';
	$('.czje_q').children('span').click(function(){
		$('.czje_q').children('span').css('background','')
		$('.czje_q').children('span').css('color','#000')
		$(this).css('background','#d91d36')
		$(this).css('color','#fff')
		aclass=$(this).attr('class')
		var str = $(this).html();
		var s=str.substring(0,str.length-1)
		$('#amount').val(s);
	});
	$('.wx_xs_zh').click(function(){
		
		$('.wx_xs_zh').css('border','1px dashed #807d7d')
		$(this).css('border','1px solid red')
		aid=$(this).attr('id')
		
	})
	$('#tijiao').click(function(){
		if(aclass==''){
			$('#tishi').css('display', 'block')
			$('#tishi_nr').css('display', 'block')
			$('#tishi_nr').html('请选择充值金额')
			setTimeout(function() {
				$('#tishi').css('display', 'none')
				$('#tishi_nr').css('display', 'none')
			}, 2000)
		}else{
			var wx_pay_money=$('#amount').val();
			$.ajax({
				type: "post",
				url: "{:url('index/pay/buildCode')}",
				data: {
					'type':'wechat','money':wx_pay_money,'username':$('#username').val()
				},
				success: function(data) {
					$('#tijiao').val('提交')
					minute = "4";
		            second = "60";
					console.log(data)
					if(data.status=='200'){
						$('#wx_pay').show()
						$('#wx_pay_img').attr('src','__CODE__/'+data.data.code)
					    $('#wx_pay_name').html($('#username').val())
					    $('#wx_pay_money').html(data.data.money)
					    var wx_timer=setInterval(DownTick_wx,1000);
					    aclass=''
		                aid=''
		                $('.czje_q').children('span').css('background','')
		                $('.czje_q').children('span').css('color','#000')
		                $('.wx_xs_zh').css('border','1px dashed #807d7d')
					}else{
						$('#tishi').css('display', 'block')
						$('#tishi_nr').css('display', 'block')
						$('#tishi_nr').html(data.info)
						setTimeout(function() {
							$('#tishi').css('display', 'none')
							$('#tishi_nr').css('display', 'none')
						}, 2000)
					}
					aclass=''
					aid=''
					$('.czje_q').children('span').css('background','')
		            $('.czje_q').children('span').css('color','#000')
		            $('.wx_xs_zh').css('border','1px dashed #807d7d')
					
				}
				
		        
			});
		}
   })
	function DownTick_wx(){
		var wx_sss=$('#zfb_djs').html()
		if(second=='01'&&minute=='00') {
        	 $('#wx_pay').hide()
        	 window.location.reload()
        };
	        second--;
	        if(minute=='4'){
	        	minute = "0" + minute;
	        }
	        if(minute=='0'){
	        	minute = "0" + minute;
	        }
	        if(second == 00) {
	             second = 59;
	             minute--;
	             if(minute < 10) minute = "0" + minute;
	         } //当秒钟为00时，秒数重新给值
		 if(second < 10) second = "0" + second;
		 $('#wx_djs').html(minute+'分'+second+'秒失效')
	        
	}
	$('#wx_pay_success').click(function(){
		$('#wx_pay').hide();
		var appfrom = '{$appfrom}';
		if( 1==parseInt(appfrom) ){
			jump2app.destroyWebActivity();
		}else{
			WebViewJavascriptBridge.callHandler('backClick');
		}
	})
</script>

{/block}